<template>
  <span :style="props.style">
    <b
      v-for="(x, index) in showText"
      :key="index + '_x'"
      :style="{
        color: x.isMatch ? `var(--el-color-primary)` : 'inherit'
      }"
    >
      {{ x.text }}
    </b>
  </span>
</template>

<script name="HightLight" setup lang="ts">
  import { computed, type CSSProperties } from 'vue';

  const props = defineProps<{
    text: string;
    regText: string;
    style?: CSSProperties;
  }>();

  const showText = computed(() => {
    const textList = props.text.split('');
    return textList.map((t) => {
      return {
        isMatch: props.regText.includes(t),
        text: t
      };
    });
  });
</script>

<style scoped>
  @import './index.less';
</style>
